import React, { useState } from 'react';
import { Form, Input, Select, InputNumber, Button, Row, Col, Slider, Collapse, Tag } from 'antd';
import { SearchOutlined, FilterOutlined, SlidersOutlined } from '@ant-design/icons';

const { Option } = Select;
const { Panel } = Collapse;

/**
 * 搜索筛选组件
 * 
 * 功能：
 * - 提供关键词搜索
 * - 支持商品分类筛选
 * - 支持价格范围筛选
 * - 支持商品状态筛选
 * - 支持排序选项
 * - 提供重置功能
 * 
 * Props:
 * @param {Function} onSearch - 搜索提交处理函数
 * @param {Array} categories - 分类选项列表
 * @param {Object} initialValues - 初始筛选值
 */
const SearchFilters = ({ onSearch, categories = [], initialValues = {} }) => {
  const [form] = Form.useForm();
  const [showAdvanced, setShowAdvanced] = useState(false);
  const [priceRange, setPriceRange] = useState([0, 10000]);

  // 商品状态选项
  const conditionOptions = [
    { label: '全新', value: 'new' },
    { label: '几乎全新', value: 'like_new' },
    { label: '轻微使用', value: 'lightly_used' },
    { label: '正常使用', value: 'used' }
  ];

  // 排序选项
  const sortOptions = [
    { label: '最新发布', value: 'created_desc' },
    { label: '价格从低到高', value: 'price_asc' },
    { label: '价格从高到低', value: 'price_desc' },
    { label: '浏览量', value: 'view_count' }
  ];

  // 处理价格范围变化
  const handlePriceRangeChange = (values) => {
    setPriceRange(values);
    form.setFieldsValue({
      min_price: values[0],
      max_price: values[1]
    });
  };

  // 处理表单提交
  const handleSubmit = () => {
    form.validateFields().then(values => {
      onSearch(values);
    });
  };

  // 处理重置
  const handleReset = () => {
    form.resetFields();
    setPriceRange([0, 10000]);
    onSearch({
      search: '',
      category: '',
      min_price: 0,
      max_price: 10000,
      condition: '',
      sort_by: 'created_desc'
    });
  };

  return (
    <div className="search-filters">
      {/* 基本搜索栏 */}
      <Form
        form={form}
        layout="inline"
        onFinish={handleSubmit}
        initialValues={{
          search: initialValues.search || '',
          category: initialValues.category || '',
          min_price: initialValues.min_price || 0,
          max_price: initialValues.max_price || 10000,
          condition: initialValues.condition || '',
          sort_by: initialValues.sort_by || 'created_desc',
          ...initialValues
        }}
      >
        <Row gutter={[16, 16]} align="middle" className="search-bar">
          <Col flex="auto">
            <Form.Item name="search" className="search-input">
              <Input
                prefix={<SearchOutlined />}
                placeholder="搜索商品名称、描述或地点"
                allowClear
              />
            </Form.Item>
          </Col>
          
          <Col>
            <Form.Item name="category">
              <Select
                placeholder="选择分类"
                allowClear
                className="category-select"
              >
                {categories.map(cat => (
                  <Option key={cat.id} value={cat.id}>{cat.name}</Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          
          <Col>
            <Form.Item>
              <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                搜索
              </Button>
            </Form.Item>
          </Col>
          
          <Col>
            <Button 
              onClick={() => setShowAdvanced(!showAdvanced)}
              icon={<FilterOutlined />}
            >
              高级筛选
            </Button>
          </Col>
        </Row>

        {/* 高级筛选面板 */}
        {showAdvanced && (
          <Collapse defaultActiveKey={['1']} className="advanced-filters">
            <Panel header="高级筛选" key="1" icon={<SlidersOutlined />}>
              <Row gutter={[16, 16]}>
                {/* 价格范围 */}
                <Col xs={24} md={12}>
                  <Form.Item label="价格范围" className="price-range">
                    <div>
                      <Slider
                        range
                        min={0}
                        max={10000}
                        value={priceRange}
                        onChange={handlePriceRangeChange}
                        marks={{
                          0: '¥0',
                          2000: '¥2000',
                          5000: '¥5000',
                          10000: '¥10000+'
                        }}
                      />
                      <div className="price-inputs">
                        <Form.Item name="min_price" noStyle>
                          <InputNumber min={0} max={priceRange[1]} placeholder="最低价" />
                        </Form.Item>
                        <span> - </span>
                        <Form.Item name="max_price" noStyle>
                          <InputNumber min={priceRange[0]} max={10000} placeholder="最高价" />
                        </Form.Item>
                      </div>
                    </div>
                  </Form.Item>
                </Col>

                {/* 商品状态 */}
                <Col xs={24} md={12}>
                  <Form.Item label="商品状态" className="condition-filter">
                    <Form.Item name="condition" noStyle>
                      <Select placeholder="选择商品状态" allowClear>
                        {conditionOptions.map(option => (
                          <Option key={option.value} value={option.value}>
                            {option.label}
                          </Option>
                        ))}
                      </Select>
                    </Form.Item>
                  </Form.Item>
                </Col>

                {/* 排序选项 */}
                <Col xs={24} md={12}>
                  <Form.Item label="排序方式" className="sort-filter">
                    <Form.Item name="sort_by" noStyle>
                      <Select placeholder="选择排序方式">
                        {sortOptions.map(option => (
                          <Option key={option.value} value={option.value}>
                            {option.label}
                          </Option>
                        ))}
                      </Select>
                    </Form.Item>
                  </Form.Item>
                </Col>

                {/* 重置和应用按钮 */}
                <Col xs={24} className="filter-actions">
                  <Button onClick={handleReset}>重置</Button>
                  <Button type="primary" htmlType="submit">
                    应用筛选
                  </Button>
                </Col>
              </Row>
            </Panel>
          </Collapse>
        )}
      </Form>
    </div>
  );
};

export default SearchFilters;
